<template>
  <div>
    <p>取证图片：</p>
    <a-upload
      listType="picture-card"
      :fileList="fileList"
      class="avatar-uploader"
      :beforeUpload="beforeUpload"
      @preview="handlePreview"
      @change="info => handleChange(info, 3)"
      :customRequest="customRequest"
    >
      <div>
        <a-icon size="large" type="plus" />
        <div class="ant-upload-text">点击上传</div>
      </div>
    </a-upload>
    <preview-modal ref="previewModal" />
  </div>
</template>

<script>
import PreviewModal from '@/components/PreviewModal'
import { saveOnlyUploads } from '@/api/supplier'
import { openNotification, getBase64 } from '@/utils/util'
export default {
  components: {
    PreviewModal
  },
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    // 预览图片，显示大图
    handlePreview(file) {
      this.$refs.previewModal.show([file.savePath])
    },
    handleChange(info, arr) {
      console.log('info', info, arr)
      this.fileList = info.fileList
      if (info.file.status === 'uploading') {
        this.loading = true
        return
      }
      if (info.file.status === 'done') {
        // Get this url from response in real world.
        getBase64(info.file.originFileObj, imageUrl => {
          this.imageUrl = imageUrl
          console.log('info', info, arr, imageUrl)

          this.loading = false
        })
      }
    },
    handleRemove(info) {
      console.log('remove info', info)
      // 调用删除图片的接口方法
      deleteUploadPic(id).then(res => {
        console.log('remove res', res)
        if (res.state === '000000') {
          openNotification('success', '删除成功')
        }
      })
    },
    // 覆盖原本的上传方法
    customRequest(info, local) {
      console.log('customRequest', info)
      const formData = new FormData()
      formData.append('file', info.file)
      // 调方法，post，body 放入 formData
      saveOnlyUploads(formData).then(res => {
        if (res.data !== null) {
          const { data } = res
          //   this.fileArr.push(data)
          this.fileList[this.fileList.length - 1].savePath = data.fileUrl + data.fileName
          this.fileList[this.fileList.length - 1].uploadId = data.uploadId
          this.fileList[this.fileList.length - 1].status = 'done'

          // this.fileList.map(v => {
          //   v.status = 'done'
          //   v.savePath = data.fileUrl + data.fileName
          //   v.uploadId = data.uploadId
          // })
          // this.fileList = [...this.fileList]

          console.log('fileList', this.fileList)
        }
      })
    },
    getParam() {
      if (this.fileList.length > 0) {
        let arr = []
        this.fileList.map(v => {
          arr.push(v.uploadId)
        })
        this.$emit('postParam', arr.join(','))
      } else {
        this.$emit('postParam', null)
      }
    }
  }
}
</script>

<style scoped>
.avatar-uploader >>> .ant-upload-list-item {
  width: 180px;
  height: 180px;
  display: inline-block;
}
.avatar-uploader >>> .ant-upload {
  width: 180px;
  height: 180px;
}
</style>
